<template>
  <div>
   <!-- 修改花卉详情表单 -->
    <el-form
      label-width="110px"
      style="width: 500px"
      :model="form"
      :rules="rules"
      ref="form">
      <el-form-item label="花卉图片" prop="cover">
        <el-upload
          v-model="form.cover"
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload">
          <img v-if="form.cover.indexOf('http') == -1" :src="URL.HYRJURL + '/' + form.cover"  alt="" class="avatar">
          <img v-else :src="form.cover"  alt="" class="avatar">
        </el-upload>
      </el-form-item>

      <el-form-item label="花卉分类">
        <el-radio v-model="form.type_id" v-for="item in types" :key="item.id" :label="item.id">{{ item.typename }}</el-radio>
      </el-form-item>

      <el-form-item label="花卉名称" prop="name">
        <el-input placeholder="请输入花卉名称" v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="花卉详情" prop="detail">
        <el-input type="textarea" :rows="8"
         placeholder="请输入花卉详情内容" v-model="form.detail"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button @click="this.$refs['form'].resetFields()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from '@/http';
import URL from '@/http/BaseUrl'
  export default {
    data() {
      return {
        types:[],//存储花卉百科类型
        URL,
        form:{
          id:1,
          type_id:10,
          cover:'',
          name:'',
          detail:''
        },
        rules:{
          type_id:[{required:true,message:'必填',trigger:'blur'}],
          cover:[{required:true,message:'必填',trigger:'blur'}],
          name:[{required:true,message:'必填',trigger:'blur'}],
          detail:[{required:true,message:'必填',trigger:'blur'}],
        },
      };
    },
    // 方法
    methods: {
      // 提交
      onSubmit(){
        // 验证
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 发送请求，提交数据
            httpApi.EncyclopediasApi.update(this.form).then(res=>{
              console.log('修改成功',res)
              if(res.data.code==200){
                this.$message({
                  message:'恭喜你，花卉详情修改成功',
                  type:'success'
                })
                // 跳转到花卉详情列表页：/home/movie-list
                this.$router.push('/home/encyclopedias-list')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
       
      },

      // 处理文件上传成功后的业务
      uploadSuccess(res, file) {
        this.form.cover = res.data
      },

      // 处理文件上传之前的业务
      beforeUpload(file) {
        const isJPG = 
        file.type === "image/jpeg" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG|png 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
    },
    // 生命周期,挂载完毕后执行
    mounted(){
      // 获取参数id，加载当前选中的花卉详细信息（发请求）
      let id = this.$route.params.id//获取花卉id
      httpApi.EncyclopediasApi.queryInfoById({id}).then(res=>{
        console.log('通过id查询花卉信息',res)
        this.form.id = res.data.data[0].id
        this.form.type_id = res.data.data[0].type_id
        this.form.cover = res.data.data[0].cover
        this.form.name = res.data.data[0].name
        this.form.detail = res.data.data[0].detail    
      })

      // 获取花卉百科类别
      httpApi.EncyclopediasApi.queryTypes().then(res=>{
        console.log(res)
        this.types = res.data.data
      }) 
    }  
  }
</script>

<style lang="scss" scoped>

</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /* .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  } */
  .avatar {
    width: 260px;
    height: 160px;
    display: block;
  }
</style>